<template>
  <div class="box">
    <van-sticky>
      <van-nav-bar
        title="答题卡"
        @click-left="$router.push('/questions/playQuestions')"
      >
        <template #left> <i class="iconfont iconbtn_nav_back"></i></template>
        <template #right>
          <span class="title">
            <span class="myQuestion">{{ myQuestion.length }}</span> /
            {{ allId.length }}</span
          >
        </template>
      </van-nav-bar>
      <div class="title-count">
        <h3>共{{ allId.length }}题</h3>
      </div>
    </van-sticky>
    <div class="main">
      <div class="list">
        <div
          v-for="(item, index) in allId"
          :key="item.id"
          class="item"
          :class="[
            { right: rightArr.some(v => v.id === item.id) },
            { wrong: wrongArr.some(v => v.id === item.id) },
            { isActive: active === index }
          ]"
          @click="indexClick(item.id, index)"
        >
          {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnswerCard',
  data () {
    return {
      allId: JSON.parse(localStorage.getItem('allId')) || [],
      myQuestion: JSON.parse(localStorage.getItem('localQuestion')) || [],
      bingo: '',
      id: this.$route.query.id || ''
    }
  },
  computed: {
    // 答对的数组
    rightArr () {
      return this.allId.filter(item => {
        return this.myQuestion.some(v => item.id === v.id && v.isRight)
      })
    },
    // 答错的数组
    wrongArr () {
      return this.allId.filter(item => {
        return this.myQuestion.some(v => {
          return item.id === v.id && !v.isRight
        })
      })
    },
    active () {
      let idx = ''
      this.allId.forEach((item, index) => {
        if (item.id === +this.id) {
          idx = index
        }
      })
      return idx
    }
  },
  methods: {
    indexClick (id, index) {
      this.$router.push({ name: 'PlayQuestions', params: { id, index } })
    }
  }
}
</script>

<style lang="less" scoped>
.title-count {
  background-color: #fff;
  height: 70px;
  margin-top: -2px;
  padding: 22px 0 22px 30px;
  h3 {
    font-size: 32px;
  }
}
.iconbtn_nav_back {
  font-size: 80px;
}
::v-deep .van-nav-bar__title {
  font-size: 36px;
  color: #222222;
  letter-spacing: 0.41px;
  font-weight: 600;
}
.title {
  font-size: 32px;
  .myQuestion {
    color: #e40137;
  }
}
.main {
  padding: 10px;
  .list {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    .item {
      width: 66px;
      height: 66px;
      margin: 19px;
      border-radius: 50%;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 66px;
      color: #999;
    }
    .right {
      color: #1dc779;
      background-color: #ddfad9;
      border: none;
    }
    .wrong {
      color: #ff4949;
      background-color: #ffefea;
      border: none;
    }
    .isActive {
      border: 2px solid #000;
    }
  }
}
</style>
